<template>
    <a-spin :spinning="loading">
        <a-row style="margin:1.5em 1.5em">
            <div style="background-color:white;box-shadow:0 0 6px 2px rgba(0,0,0,0.15);padding-bottom:15px;">
                <div style="padding:17px 22px;" class="size14 cont">{{ $t('基础信息') }}</div>
                <div class="line"></div>
                <div style="padding:17px 22px;">
                    <a-row class="size14">
                        <a-col :span="2" class="shallow">
                            {{ $t('目录路径') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ quotaItem.dir }}
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14">
                        <a-col :span="2" class="shallow">
                            {{ $t('配额类型') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ typeMap.get(quotaItem.type) }}
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14">
                        <a-col :span="2" class="shallow">
                            {{ $t('用户类型') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ userMap.get(quotaItem.utype) }}
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14">
                        <a-col :span="2" class="shallow">
                            {{ $t('用户名称') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ name }}
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14">
                        <a-col :span="2" class="shallow">
                            {{ $t('配额方式') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ modeMap.get(quotaItem.mode) }}
                        </a-col>
                    </a-row>
                </div>
            </div>
        </a-row>

        <a-row style="margin:1.5em 1.5em">
            <div style="background-color:white;box-shadow:0 0 6px 2px rgba(0,0,0,0.15);padding-bottom:15px;">
                <div style="padding:17px 22px;" class="size14 cont">{{ $t('配额详情') }}</div>
                <div class="line"></div>
                <div style="padding:17px 22px;">
                    <a-row class="size14" :gutter="16">
                        <a-col :span="12">
                            <a-col :span="6" class="shallow">
                                {{ $t('容量数硬配额') }}:
                            </a-col>
                            <a-col :span="18" class="cont">
                                {{ formatBytes(quotaItem.max_bytes) }}
                            </a-col>
                        </a-col>
                        <a-col :span="12">
                            <a-col :span="6" class="shallow">
                                {{ $t('文件数硬配额') }}:
                            </a-col>
                            <a-col :span="18" class="cont">
                                {{ numberFormat(quotaItem.max_files) }}
                            </a-col>
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14" :gutter="16">
                        <a-col :span="12">
                            <a-col :span="6" class="shallow">
                                {{ $t('已用容量') }}:
                            </a-col>
                            <a-col :span="18" class="cont">
                                {{ formatBytes(quotaItem.use_size) }}
                            </a-col>
                        </a-col>
                        <a-col :span="12">
                            <a-col :span="6" class="shallow">
                                {{ $t('已用文件数') }}:
                            </a-col>
                            <a-col :span="18" class="cont">
                                {{ numberFormat(quotaItem.use_files) }}
                            </a-col>
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14" :gutter="16">
                        <a-col :span="12">
                            <a-col :span="6" class="shallow">
                                {{ $t('容量硬配额使用率') }}:
                            </a-col>
                            <a-col :span="18" class="cont">
                                {{ percent(quotaItem.use_size, quotaItem.max_bytes) }}%
                            </a-col>
                        </a-col>
                        <a-col :span="12">
                            <a-col :span="6" class="shallow">
                                {{ $t('文件数硬配额使用率') }}:
                            </a-col>
                            <a-col :span="18" class="cont">
                                {{ percent(quotaItem.use_files, quotaItem.max_files) }}%
                            </a-col>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </a-row>
    </a-spin>
</template>
<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import EmptyData from '@/components/common/EmptyData'

export default {
    components: { EmptyData, NoAuthPage },
    props: ['id', 'name'],
    data() {
        return {
            typeMap: new Map([
                [1, "目录配额"],
                [2, "用户配额"],
                [3, "用户组配额"],
            ]),
            modeMap: new Map([
                [1, "用户子目录配额"],
                [2, "用户组目录配额"],
            ]),
            userMap: new Map([
                [1, "本地用户"],
                [2, "AD用户"],
            ]),
            quotaItem: {
                dir: '',
                type: '',
                utype: '',
                mode: '',
                max_bytes: '',
                max_files: '',
                use_size: '',
                use_files: '',
            },
            loading: false,
        }
    },
    async mounted() {
        await this.getList(this.$props.id)
    },
    methods: {
        async getList(id) {
            this.loading = true
            const { data } = await this.$api.directory.getQuotaDetailApi(id)
            if (data.flag == 1) {
                this.model(data.id) //返回模板
                this.notice(data.id, data.params, data.flag) //通知列表显示
            } else {
                this.quotaItem = data.params
            }
            this.loading = false
        },
        formatBytes(bytes, decimals = 2) {
            if (bytes === 0 || bytes === null) return '-';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        },
        numberFormat(value) {
            if (value === 0 || value === null) return '-';
            const param = {};
            let k = 10000,
                sizes = ['个', '万', '亿'],
                i;
            if (value < k) {
                param.value = value;
                param.unit = '个';
            } else {
                i = Math.floor(Math.log(value) / Math.log(k));
                param.value = ((value / Math.pow(k, i)));
                param.unit = sizes[i];
            }
            return param.value + param.unit;
        },
        percent(value1, value2) {
            const result = (value1 / value2 * 100).toFixed(2)
            if (value1 <= 0 || value2 <= 0) return '0.00'
            else if (result > 100) return '100.00'
            else return result
        }
    }
}
</script>


<style scoped>
.size14 {
    font-size: 14px;
}

.line {
    width: 100%;
    border-bottom: solid 1px #cccccc;
    line-height: 0.9;
}

.shallow {
    color: #666666;
}

.cont {
    color: #333333;
    /* font-weight: bolder; */
}
</style>
